<template>
    <div class="header" style="position: relative">
        <div class="container" style="height: 100px;position: relative">
            <!-- Header BEGIN -->
            <div class="header-logo"></div>
            <!-- Header END -->

            <!-- HeaderNav BEGIN -->
            <div class="header-nav">
                <ul class="nav-list">
                    <li v-for="(item,index) in items" :key="index" class="nav-item"
                        :class="{'nav-item-active':index==isActive}" @mouseover="show(index)" @mouseleave="hide">
                        <a href="/" class="link"><span>{{item.title}}</span></a>
                    </li>
                </ul>
            </div>
            <!-- HeaderNav END -->
        </div>

        <!-- HeaderNavMenu BEGIN -->
        <div class="header-nav-menu header-nav-menu-active" :class="[menuShow?'slide-up':'slide-down']"
             @mouseleave="slideHide">
            <div class="container">
                <div v-if="obj==0">
                    <GoodList :goodId="0"/>
                </div>
                <div v-else-if="obj==1">
                    <GoodList :goodId="1"/>
                </div>
                <div v-else></div>
            </div>
        </div>
        <!-- HeaderNavMenu END -->
    </div>
</template>

<script>
    import GoodsList from './GoodList.vue';
    import GoodList from "./GoodList";

    export default {
        name: "Header",
        components: {GoodList},
        data() {
            return {
                items: [{title: '小米手机'}, {title: 'Redmi红米'}, {title: '电视'}, {title: '笔记本'},
                    {title: '家电'}, {title: '路由器'}, {title: '智能硬件'}, {title: '服务'}, {title: '社区'}],
                isActive: -1,
                obj: '',
                menuShow: true
            }
        },
        methods: {
            show: function (index) {
                let _this = this;
                _this.isActive = index;
                _this.obj = index;
                _this.menuShow = false;
            },
            hide: function () {
                this.isActive = -1;
            },
            slideHide: function () {
                let _this = this;
                _this.menuShow = true;
            }
        },
        component: {
            GoodsList
        }
    }
</script>

<style scoped>
    .header .nav-list {
        position: relative;
        z-index: 10;
        float: left;
        width: 1100px;
        height: 88px;
        margin: 0;
        padding: 12px 0 0 30px;
        list-style-type: none;
        font-size: 16px;
    }

    .header .nav-item {
        float: left;
    }

    .header .nav-item .link {
        display: block;
        padding: 26px 10px 38px;
        color: #333;
        -webkit-transition: color .2s;
        transition: color .2s;
    }

    .header .nav-item-active .link {
        color: #ff6700;
    }

    .header .header-nav-menu {
        position: absolute;
        top: 100px;
        left: 0;
        z-index: 24;
        width: 100%;
        height: 0;
        border-top: 1px solid #e0e0e0;
        background: #fff;
        overflow: hidden;
    }

    .header .header-nav-menu.slide-up {
        //display: none;
        height: 0;
    }

    .header .header-nav-menu.slide-down {
        display: block;
        height: 229px;
    }

    .header .header-nav-menu-active {
        border-bottom: 1px solid \9;
        -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
        box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
        -webkit-transition: height .3s, -webkit-box-shadow .2s;
        transition: height .5s, -webkit-box-shadow .2s;
        transition: box-shadow .2s, height .5s;
        transition: box-shadow .2s, height .5s, -webkit-box-shadow .2s;
    }
</style>